<template>
	<view class="order">
		<view class="order-item" v-for="(ifro,id) in dataList" :key='id' @click="onClick(ifro.detailed[0].fk_product_id)">
			<view class="order-time">
				<view>订单号：{{ifro.order_no}}</view>
				<view class="status">{{status(ifro.pay_status)}}</view>
			</view>

			<view class="video-box">
				<image class="video_img" :src="ifro.detailed[0].product_img" />
				<view class="video_details">
					<view class="video-title u-line-1">
						{{ifro.detailed[0].product_name}}
					</view>
					<view class=" video-mf u-line-1">
						￥{{ifro.detailed[0].price}}
					</view>
				</view>
			</view>
			<view class="video-live">
				<view class="video-live-left">
					<view class="video-live-left-img iconfont iconfont-e65c"></view>
					<view class="">播放</view>
				</view>
				<view class="video-live-right">
					<view class="video-live-title">实付：</view>
					<view class="video-live-right-price">￥{{ifro.total_amount}}</view>
				</view>
			</view>
		</view>
	</view>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				dataList: {}
			}
		},

		computed: {
			status(status) {
				return function(status) {
					switch (status) {
						case 0:
							return "未支付";
						case 1:
							return '已支付';
						case 2:
							return '退款申请中';
						case 3:
							return '已退款';
						case 4:
							return '已发货';
						default:
							return '已收货';
					}
				}
			},
			judeg(status) {
				return function(status) {
					if (status == 1 || status == 4 || status == 5) {
						return true
					} else {
						return false
					}
				}
			}
		},

		created() {
			this.initPage()
		},
		methods: {
			initPage() {
				this.$resPost('GetUsersOrderList', {
					type: 5
				}).then(res => {
					this.dataList = res.data
				})
			},
			onClick(id){
				this.$to(`/package/video/details/index?id=${id}`)
			}
		}
	}
</script>


<style lang='scss' scoped>
	.order-item {
		border-bottom: 20rpx solid #f5f5f5;
	}

	.order-time {
		display: flex;
		justify-content: space-between;
		padding: 0 24rpx;
		font-size: 22rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #333333;
		line-height: 80rpx;
	}

	.video-box {
		display: flex;
		align-items: center;
		width: 750rpx;
		padding: 24rpx;
		background: #F7FCFF;
	}

	.video-title {
		width: calc(750rpx - 44rpx - 230rpx);
		font-size: 26rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #333333;
	}

	.video_img {
		width: 220rpx;
		height: 128rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.video-time {
		width: calc(750rpx - 44rpx - 230rpx);
		font-size: 20rpx;
		font-weight: 500;
		color: #999999;
	}

	.video-mf {
		font-size: 26rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #333333;
	}

	.video_details {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 128rpx;
		padding: 5rpx 0;
		margin-left: 10rpx;

	}

	.video-live {
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
		line-height: 80rpx;
	}

	.video-live-left {
		display: flex;
		align-items: center;
	}

	.video-live-left-img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		color: #fff;
		font-size: 42rpx;
	}

	.video-live-right {
		display: flex;
		align-items: center;
	}

	.video-live-title {
		font-size: 22rpx;
		font-weight: 500;
		color: #333333;
	}

	.video-live-right-price {
		font-size: 30rpx;
		font-weight: 500;
		color: #F82424;
	}

	.status {
		color: red;
		font-size: 25rpx;
	}
</style>
